<script setup>
import { useRouter } from 'vue-router';


const router = useRouter();
function closeCurrentPage() {
  router.back()
}

</script>


<template>
    <div class="city-body">
      <div class="city-title">
        <van-icon class="title-close" size="20px" name="cross" @click="closeCurrentPage()" />
        <span>当前城市-成都</span>
      </div >
      <div class="city-search">
          <div class="search-box">
            <van-icon name="search" />
              <input placeholder="请输入想要搜索的城市名称"/>
          </div>
      </div>
      <div class="city-content">
        <div class="city-location">
          <span> GPS定位你所在的城市</span>
          <ul>
            <li>
              <div>成都</div>
            </li>
          </ul>


        </div>
        <div class="hot-city">

        </div>

        <div class="city-list">

        </div>
      </div>
    </div>
</template>


<style scoped>

.city-title{
  display: flex;
  width: 100%;
  height: 40px;
  align-items: center;
  padding-bottom: 10px;
  padding-right: 10px;
  padding-left: 10px;
  border-bottom: 0.5px solid #ededed;
  background-color: #fff;
}
.title-close{
  /*padding-left: 10px;*/
}
.city-title span{
  /*margin-left: 10%;*/
  font-size: 17px;
}
.city-location span{
  font-size: 13px;
  color: #797d82;
  margin-bottom: 10px;
}
.city-body{
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  background-color: #ffffff;
  min-height: 100%;
  padding-top: env(safe-area-inset-top);
}
.city-content{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: #f4f4f4;
}
.city-location{
  box-sizing: border-box;
  padding-left: 10px;
  padding-top: 20px;
  background-color: #fff;
}
.city-location ul li div{
  width: 100px;
  height: 30px;
  background-color: #f4f4f4;
  line-height: 30px;
  border-radius: 3px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 7.5px;
  font-size: 14px;
  color: #191a1b;
}
.city-location ul{
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-line-pack: center;
  align-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 10px;
}
.city-location li{
  width: 100%;
  text-align: center;
  padding-bottom: 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
}
.city-search{
  height: 30px;
  width: 100%;
  padding: 10px;
  background-color: #f4f4f4;

}
.search-box{
  width: 100%;
  height: 30px;
  background-color: #fff;
  border-radius: 2px;
}
.search-box input{
  width: 80%;
  /*height: 100%;*/
  background-color: #fff;
  justify-items: end;
  align-items: center;
  border: 0 #fff;
}
.input-wrap{
  background-color: #fff;
  position: relative;
  display: inline-block;
  border-radius: 3px;
  width: 100%;
  height: 30px;
}
.search-input{
  position: absolute;
  left: 33.5px;
  top: 0;
  height: 30px;
  width: calc(100% - 65px);
  border: 0;
}

</style>